<template>
    <div class="float-bottom">
        
      <button :class="{active:layerFlag==='orthophoto'}" @click="layerChange('orthophoto')">正射影像</button>
      <button :class="{active:layerFlag==='gaode'}" @click="layerChange('gaode')">高德地图</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FloatView',
    props: {},
    data() {
      return {
        layerFlag: 'gaode'
      }
    },
    mounted() {},
    methods: {
      layerChange(option) {
        this.layerFlag = option
        this.$bus.emit('layerChange', option)
      }
    }
  }
  </script>
  
  <style >
  .float-bottom {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 6px 12px;
    line-height: 2;
    color: #fff;
    font-size: 16px;
    background: rgba(31, 31, 31, 0.5);
  }
  
  .active {
    color: #fff;
    background-color: rgb(82, 82, 83);
  }
  </style>
  
  